<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <span class="title">项目详情</span>
      </div>
    </template>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="项目名称">{{ projectInfo.proName }}</el-descriptions-item>
      <el-descriptions-item label="项目编号">{{ projectInfo.proNumber }}</el-descriptions-item>
      <el-descriptions-item label="项目类型">
        <dict-tag :options="project_type" :value="projectInfo.proType || ''" />
      </el-descriptions-item>
      <el-descriptions-item label="合同名称">{{ projectInfo.contractName || '' }}</el-descriptions-item>
      <el-descriptions-item label="项目区域">{{ projectInfo.projectRegion || '' }}</el-descriptions-item>
      <el-descriptions-item label="项目状态">
        <dict-tag :options="contract_status" :value="projectInfo.proStatus || ''" />
      </el-descriptions-item>
      <el-descriptions-item label="业主单位">{{ projectInfo.ownerUnit }}</el-descriptions-item>
      <el-descriptions-item label="执行总裁">{{ projectInfo.proPresidentsName }}</el-descriptions-item>
      <el-descriptions-item label="项目负责人">{{ projectInfo.proLeadersName }}</el-descriptions-item>
      <!-- 可选字段：创建信息 -->
      <el-descriptions-item v-if="showCreateInfo" label="创建人">{{ projectInfo.createBy }}</el-descriptions-item>
      <el-descriptions-item v-if="showCreateInfo" label="创建时间">{{ parseTime(projectInfo.createTime, '{y}-{m}-{d}')
      }}</el-descriptions-item>
      <!-- 可选字段：流程状态 -->
      <el-descriptions-item v-if="showFlowStatus" label="流程状态">
        <dict-tag :options="approval_commit_status" :value="projectInfo.flowStatus" />
      </el-descriptions-item>
    </el-descriptions>

    <el-collapse class="mt-3">
      <el-collapse-item title="项目工作内容" name="1">
        <div class="content-box">{{ projectInfo.proContent || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="项目备注" name="2">
        <div class="content-box">{{ projectInfo.remark || '' }}</div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script setup lang="ts">
import { getCurrentInstance, toRefs } from 'vue';

// 定义组件 props
interface Props {
  projectInfo: any;
  loading?: boolean;
  showCommitStatus?: boolean;
  showFlowStatus?: boolean;
  showCreateInfo?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  showCommitStatus: false,
  showFlowStatus: false,
  showCreateInfo: false
});

// 获取字典数据
const { proxy } = getCurrentInstance();
const { project_type, contract_status, approval_commit_status } = toRefs<any>(
  proxy?.useDict('project_type', 'contract_status', 'approval_commit_status')
);

</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 24px;
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16px;
    font-weight: bold;
  }
}

.content-box {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  min-height: 60px;
  white-space: pre-wrap;
}

.mt-3 {
  margin-top: 12px;
}

:deep(.el-descriptions__label) {
  width: 120px;
}

:deep(.el-collapse-item__header) {
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.el-descriptions) {
    .el-descriptions__label {
      width: 100px;
    }
  }

  .content-box {
    padding: 8px;
    min-height: 40px;
  }
}
</style>
